<!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>音乐播放器 - 23215220320-李佳轩</title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Segoe UI', sans-serif;
                }

                body {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 100vh;
                    background: #1a1a1a;
                    color: white;
                }

                .player {
                    width: 800px;
                    background: #2c2c2c;
                    padding: 30px;
                    border-radius: 15px;
                }

                .song-info {
                    text-align: center;
                    margin-bottom: 30px;
                }

                .controls {
                    display: flex;
                    justify-content: center;
                    gap: 20px;
                    margin-bottom: 20px;
                }

                .control-btn {
                    font-size: 24px;
                    background: none;
                    border: none;
                    color: white;
                    cursor: pointer;
                    transition: color 0.3s;
                }

                .control-btn:hover {
                    color: #4a90e2;
                }

                .play::before {
                    content: '▶'; /* 播放按钮图标 */
                }

                .progress-container {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    margin: 20px 0;
                }

                #progress {
                    width: 60%;
                    height: 5px;
                    -webkit-appearance: none;
                    background: #555;
                    border-radius: 2px;
                }

                #progress::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    width: 20px;
                    height: 20px;
                    background: #4a90e2;
                    border-radius: 50%;
                    cursor: pointer;
                }

                .playlist {
                    margin-top: 30px;
                }

                .playlist ul {
                    list-style: none;
                }

                .playlist li {
                    padding: 8px 0;
                    cursor: pointer;
                    transition: background 0.3s;
                }

                .playlist li:hover {
                    background: #3c3c3c;
                }

                /* 适配移动端 */
                @media (max-width: 600px) {
                    .player {
                        width: 90%;
                        padding: 20px;
                    }

                    .progress-container {
                        flex-direction: column;
                        gap: 5px;
                    }
                }
            </style>
        </head>
        <body>
            <div class="player">
                <div class="song-info">
                    <h2 id="songTitle">歌曲名称</h2>
                    <p id="artist">歌手</p>
                </div>
                <audio id="audio" controls>
                   <source src="music/1.mp3" type="audio/mpeg">
                </audio>

  
                <div class="controls">
                    <button id="prev" class="control-btn">&#10094;</button>
                    <button id="play" class="control-btn play">&#9658;</button>
                    <button id="next" class="control-btn">&#10095;</button>
                </div>

                <div class="progress-container">
                    <input type="range" id="progress" value="0">
                    <span id="currentTime">00:00</span> / <span id="duration">00:00</span>
                </div>

                <div class="playlist">
                    <h3>播放列表</h3>
                    <ul id="playlistList"></ul>
                </div>
            </div>

            <script>
                // 模拟歌曲列表（可从后端获取）
                const songs = [
                    { id: 1, title: '桃花诺', artist: '邓紫棋', src: 'music/1.mp3' },
                    { id: 2, title: '青花瓷', artist: '周杰伦', src: 'music/2.mp3' },
                    { id: 3, title: '江南', artist: '林俊杰', src: 'music/3.mp3' }
                ];

                const audio = document.getElementById('audio');
                const songTitle = document.getElementById('songTitle');
                const artist = document.getElementById('artist');
                const playBtn = document.getElementById('play');
                const prevBtn = document.getElementById('prev');
                const nextBtn = document.getElementById('next');
                const progress = document.getElementById('progress');
                const currentTime = document.getElementById('currentTime');
                const durationTime = document.getElementById('duration');
                const playlistList = document.getElementById('playlistList');

                let currentIndex = 0;

                // 初始化播放列表
                function renderPlaylist() {
                    playlistList.innerHTML = songs.map((song, index) => `
                        <li data-index="${index}" class="${index === currentIndex ? 'active' : ''}">
                            ${song.title} - ${song.artist}
                        </li>
                    `).join('');

                    playlistList.querySelectorAll('li').forEach(li => {
                        li.addEventListener('click', () => {
                            currentIndex = parseInt(li.dataset.index);
                            loadSong(currentIndex);
                        });
                    });
                }

                // 加载歌曲
                function loadSong(index) {
                    const song = songs[index];
                    audio.src = song.src;
                    songTitle.textContent = song.title;
                    artist.textContent = song.artist;
                    renderPlaylist();
                }

                // 播放/暂停控制
                function togglePlay() {
                    if (audio.paused) {
                        audio.play();
                        playBtn.classList.remove('play');
                        playBtn.innerHTML = '&#9104;'; // 暂停图标
                    } else {
                        audio.pause();
                        playBtn.classList.add('play');
                        playBtn.innerHTML = '&#9658;'; // 播放图标
                    }
                }

                // 上一曲/下一曲
                function prevSong() {
                    currentIndex = (currentIndex - 1 + songs.length) % songs.length;
                    loadSong(currentIndex);
                    audio.play();
                }

                function nextSong() {
                    currentIndex = (currentIndex + 1) % songs.length;
                    loadSong(currentIndex);
                    audio.play();
                }

                // 进度条更新
                function updateProgress() {
                    progress.value = (audio.currentTime / audio.duration) * 100;
                    currentTime.textContent = formatTime(audio.currentTime);
                    durationTime.textContent = formatTime(audio.duration);
                }

                // 拖动进度条
                progress.addEventListener('change', () => {
                    audio.currentTime = (progress.value / 100) * audio.duration;
                });

                // 格式化时间
                function formatTime(seconds) {
                    const minutes = Math.floor(seconds / 60);
                    seconds = Math.floor(seconds % 60);
                    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                }

                // 初始化
                function init() {
                    loadSong(currentIndex);
                    //audio.addEventListener('play', togglePlay);
                    //audio.addEventListener('pause', togglePlay);
                    audio.addEventListener('timeupdate', updateProgress);
                    audio.addEventListener('ended', nextSong);

                    playBtn.addEventListener('click', togglePlay);
                    prevBtn.addEventListener('click', prevSong);
                    nextBtn.addEventListener('click', nextSong);
                    renderPlaylist(); // 调整初始化顺序，确保列表渲染
                }

                init();
            </script>
        </body>
        </html>
    